<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="80px" label-position="top">
      <el-form-item label="描述">
        <el-input type="textarea" v-model="form.description"></el-input>
      </el-form-item>
      <el-form-item label="中间件">
        <div>
           <el-radio 
            >无</el-radio
          >
          <el-radio v-model="form.systemMiddleware" :label="true"
            >系统</el-radio
          >
          <el-radio v-model="form.systemMiddleware" :label="false"
            >自定义</el-radio
          >
        </div>

        <el-select
          v-if="form.systemMiddleware"
          size="small"
          value=""
          style="width:100%"
          placeholder="请选择"
          v-model="form.systemMiddlewareId"
          @change="systemMiddlewareChange"
        >
          <el-option
            v-for="item in middlewares"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>

        <el-upload
          v-if="!form.systemMiddleware"
          class="upload-demo"
          :action="$store.getters['app/resourceUploadUrl']"
          :show-file-list="false"
          :on-success="onResourceUploadSuccessHandler"
        >
          <el-button size="small" type="primary" plain>上传中间件 </el-button>
        </el-upload>
        <span v-if="!form.systemMiddleware">
          <el-button
            v-if="
              form.middleware.fileName && form.middleware.fileName.length > 0
            "
            type="text"
            @click="handleMiddlewareResourceRemove()"
            >删除</el-button
          >
          <span>&nbsp;&nbsp;{{ form.middleware.fileName }}</span>
        </span>
      </el-form-item>
      <el-form-item label="中间件入口（全类名）" v-if="!form.systemMiddleware">
        <el-input type="text" v-model="form.middlewareEntry"></el-input>
      </el-form-item>
      <el-form-item label="是否主动推送">
        <el-checkbox label="主动推送" v-model="form.push"></el-checkbox>
      </el-form-item>

      <el-form-item label="刷新频率(ms)" v-if="form.push">
        <el-input
          type="number"
          size="mini"
          v-model="form.updateFrequency"
        ></el-input>
      </el-form-item>
      <el-form-item label="参数">
        <el-row v-if="!form.systemMiddleware">
          <el-button size="small" type="primary" plain @click="addParameter"
            >新增参数</el-button
          >
        </el-row>

        <el-card class="box-card" shadow="never">
          <el-collapse>
            <el-collapse-item
              :name="index"
              v-for="(item, index) in form.parameters"
              :key="index"
            >
              <template slot="title">
                <el-button
                  v-if="!form.systemMiddleware"
                  type="text"
                  size="mini"
                  @click="deleteParameter(index)"
                  >删除</el-button
                >
                &nbsp; &nbsp; &nbsp;
                {{ item.name }}
              </template>

              <el-form-item label="权限">
                <el-checkbox
                  label="公开"
                  v-model="item.isPublic"
                  :disabled="form.systemMiddleware"
                ></el-checkbox>
                <el-checkbox
                  label="必填"
                  v-model="item.required"
                  :disabled="form.systemMiddleware"
                ></el-checkbox>
              </el-form-item>
              <el-form-item label="名称">
                <el-input
                  type="text"
                  size="mini"
                  v-model="item.name"
                  :disabled="form.systemMiddleware"
                ></el-input>
                <el-input
                  type="text"
                  size="mini"
                  v-model="item.description"
                  placeholder="参数描述"
                  :disabled="form.systemMiddleware"
                ></el-input>
              </el-form-item>
              <el-form-item label="默认值">
                <el-input
                  type="textarea"
                  size="mini"
                  v-model="item.value"
                  :autosize="{ minRows: 1, maxRows: 4 }"
                ></el-input>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import resourceApi from "@/api/resource";

export default {
  components: {},
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  props: {
    form: {
      default: () => {
        return {
          description: "",
          middleware: {
            fileId: "",
            fileName: ""
          },
          middlewareEntry: "",
          name: "",
          parameters: [
            {
              description: "",
              isPublic: true,
              name: "",
              required: true,
              value: ""
            }
          ],
          push: true,
          systemMiddleware: true,
          systemMiddlewareId: "",
          updateFrequency: 0
        };
      }
    }
  },
  mounted() {
    this.loadMiddlewares();
  },
  data() {
    return {
      middlewares: []
      // form: {
      //   id: null,
      //   cover: {
      //     fileId: "",
      //     fileName: ""
      //   },
      //   description: "",
      //   middleware: {
      //     fileId: "",
      //     fileName: ""
      //   },
      //   middlewareEntry: "",
      //   name: "",
      //   parameters: [
      //     {
      //       name: "",
      //       description: "",
      //       isPublic: true,
      //       required: true,
      //       value: ""
      //     }
      //   ],
      //   isPush: true,
      //   updateFrequency: 0,
      //   systemMiddlewareId: '',
      // }
    };
  },
  computed: {},
  created() {
    this.listLoading = false;
  },
  mounted() {
    this.loadMiddlewares();
  },
  methods: {
    loadMiddlewares() {
      this.$store
        .dispatch("middleware/getAll")
        .then(res => {
          this.middlewares = res.items;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    onCoverUploadSuccessHandler(response, file, fileList) {
      debugger;
      let fileItem = response.data[0];

      if (!this.form.cover) this.$set(this.form, "cover", {});

      this.$set(this.form.cover, "fileId", fileItem.id);
      this.$set(this.form.cover, "fileName", fileItem.fileName);
    },
    onResourceUploadSuccessHandler(response, file, fileList) {
      debugger;
      let fileItem = response.data[0];

      if (!this.form.middleware) this.$set(this.form, "middleware", {});

      this.$set(this.form.middleware, "fileId", fileItem.id);
      this.$set(this.form.middleware, "fileName", fileItem.fileName);
    },
    deleteResource(index) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if (!this.form.middleware) this.$set(this.form, "middleware", {});

        this.$set(this.form.middleware, "fileId", null);
        this.$set(this.form.middleware, "fileName", null);
      });
    },
    addParameter() {
      this.form.parameters.push({
        name: "",
        isPublic: true,
        required: false,
        value: ""
      });
    },
    deleteParameter(index) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.form.parameters.splice(index, 1);
      });
    },
    handleMiddlewareResourceRemove() {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$set(this.form.middleware, "fileId", "");
        this.$set(this.form.middleware, "fileName", "");
      });
    },
    systemMiddlewareChange() {
      this.$store
        .dispatch("middleware/get", this.form.systemMiddlewareId)
        .then(res => {
          res.cover = res.cover || {};
          res.middleware = res.middleware || {};
          res.parameters = res.parameters || [];
          res.systemMiddlewareId = this.form.systemMiddlewareId;
          res.systemMiddleware = this.form.systemMiddleware;

          for (let key in res) {
            this.$set(this.form, key, res[key]);
          }

          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    }
  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
